<template>
  <div class="device-count" @click="toDevaceMonitor">
    <img v-if="type == DEVICE_TYPES.QB" src="~@/assets/images/statistics/icon_qb.png">
    <img v-if="type == DEVICE_TYPES.HZBJ" src="~@/assets/images/statistics/icon_hzbjq.png">
    <img v-if="type == DEVICE_TYPES.ZMD" src="~@/assets/images/statistics/icon_zmd.png">
    <img v-if="type == DEVICE_TYPES.UPS" src="~@/assets/images/statistics/icon_UPS.png">
    <img v-if="type == DEVICE_TYPES.ZSD" src="~@/assets/images/statistics/icon_zmd.png">
    <!-- <img v-if="type == DEVICE_TYPES.XFSB" src="~@/assets/images/statistics/icon_xfb.png"> -->
    <img v-if="type == DEVICE_TYPES.FJ" src="~@/assets/images/statistics/icon_fj.png">
    <img v-if="type == DEVICE_TYPES.SXJ" src="~@/assets/images/statistics/icon_sxj.png">
    <img v-if="type == DEVICE_TYPES.FHJZM" src="~@/assets/images/statistics/icon_fhjzm.png">
    <div class="center">
      <div>{{ title }}</div>
      <div class="num">{{ isNumberStr(info.total) ? info.total : '--' }}/总数</div>
    </div>
    <div class="right">
      <div>正常：{{ isNumberStr(info.normal) ? info.normal : '--' }}</div>
      <div>故障：{{ isNumberStr(info.fault) ? info.fault: '--' }}</div>
    </div>
  </div>
</template>

<script>
import { DEVICE_TYPES } from './DEVICE_TYPES'
import { isNumberStr } from '@/utils/index'
export default {
  props: {
    title: String,
    type: {
      require: true,
      default: 'QB',
      type: [String, Number]
    },
    info: {
      type: Object,
      default() {
        return {
          total: null,
          normal: null,
          fault: null
        }
      }
    }
  },
  data() {
    return {
      DEVICE_TYPES
    }
  },
  computed: {
    // title() {
    //   const t = ''
    //   switch (this.type) {
    //     case this.DEVICE_TYPES.QB: t = '全部设备'
    //       return '全部设备'
    //   }

    //   return t
    // }
  },
  methods: {
    isNumberStr,
    toDevaceMonitor() {
      this.$router.push({
        path: '/sys_jd/equ/tunnelmonitor/device'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');
 .device-count {
      display: flex;
      background: #D1E9FF;border-radius: 6px;
      padding: 1.1458vw 0 1.1458vw 1.5625vw;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 0.7292vw;
      color: rgba(0,0,0,0.65);
      img {
        width: 3.125vw;
        height: 3.125vw;
      }
      .center {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding-left: 14px;
        height: 3.125vw;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 0 0 6.25vw;
        height: 3.125vw;
      }
      .num {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 1.0417vw;
        color: #262626;
      }
    }
</style>
